<template>
  <div>
    <div :class="'present'+i" v-for="i in 50">
      <div class="cap"></div>
      <div class="vribbon"></div>
      <div class="hribbon"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "box"
  }
</script>

<style scoped lang="scss">
  * {
    html, body {
      background-color: #222;
      div {
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }

  .vribbon, .hribbon {
    box-shadow: 0 0 20px rgba(black, 0.5)
  }

  .vribbon {
    width: 15%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  .hribbon {
    width: 100%;
    height: 15%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .cap {
    height: 15%;
    width: calc(100% + 10px);
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-5px);
    box-shadow: 0 0 20px rgba(black, 0.5);
  }

  @mixin present($size:100px,$bodyColor: #ff5151,$ribbonColor: #fff,$rotateDeg: 0deg) {
    width: $size;
    height: $size;
    position: relative;
    background-color: $bodyColor;
    box-shadow: 0px 0px 20px rgba(black, 0.5);
    transform: rotate($rotateDeg);
    margin: 10px;
    .vribbon, .hribbon {
      background-color: $ribbonColor;
    }
    .cap {
      background-color: $bodyColor;
    }
  }

  .present {
    @include present()
  }

  $colorRed: #f24;
  $colorWhite: #fff;
  $colorBlue: #3364f7;
  $colorYellow: #ffd221;
  $colorPurple: #c747ff;
  $colors: ($colorRed, $colorWhite, $colorBlue, $colorYellow, $colorPurple);
  @for $i from 1 through 50 {
    $size: random(50)+50;
    $rotateDeg: random(20)-10;
    $bodyColor: nth($colors, random(5));
    $ribbonColor: nth($colors, random(5));
    @if ($ribbonColor==$bodyColor) {
      $ribbonColor: nth($colors, random(5));
    }
    .present#{$i} {
      @include present(#{$size}px, $bodyColor, $ribbonColor, #{$rotateDeg}deg)
    }
  }
</style>
